<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/font-awesome.css"/>
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/notifications/Lobibox.js"></script>
    <script src="js/fronted/register.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
    <style>
        .pl60 {
            padding-left: 60px;
        }

        .mgt20 {
            margin-top: 20px;
        }

        .common-index {
            height: 24px;
            width: 24px;
            display: inline-block;
        }

        .active-index {
            background: url("images/reg-icon.png") no-repeat 0 0;
        }

        .step-index {
            line-height: 24px;
            font-weight: 700;
            color: #ffffff;
            background: url("images/reg-icon.png") no-repeat 0 -200px;
        }

        .active {
            background-color: #21cb91;
        }

        div.process-label p.active {
            background-color: white;
            color: #21cb91;
        }

        .common-pointer {
            height: 10px;
            width: 140px;
            position: absolute;
        }

        div.pointer {
            background: url("images/reg-icon.png") no-repeat 0 -100px;
        }

        .active-pointer {
            background: url("images/reg-icon.png") no-repeat 0 -130px;
        }

        .line-1 {
            top: 7px;
            left: 73px;
        }

        .line-2 {
            top: 7px;
            left: 241px;
        }

        div.process-label {
            width: 100px;
            text-align: center;
        }

        div.other-label {
            margin-left: 69px;
        }

        div.process-label p {
            margin-bottom: 0;
            padding-top: 15px;
        }

        h3.success-text {
            color: #21cb91;
            text-align: center;
        }

        .username-success {
            color: forestgreen;
            position: absolute;
            top: 34px;
            right: 6px;
            display: none;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="index.jsp" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i>
                寻欢易购</a>
        </div>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-sm-push-3 col-xs-12 pl60">
            <!-- 控制注册导航 -->
            <div style="display: flex; flex-direction: row; position: relative;">
                <div class="process-label">
                    <span class="common-index step-index">1</span>
                    <p class="active">验证手机号</p>
                </div>
                <div class="common-pointer pointer line-1"></div>
                <div class="process-label other-label">
                    <span class="common-index step-index">2</span>
                    <p class="info-text">填写账号信息</p>
                </div>
                <div class="common-pointer pointer line-2"></div>
                <div class="process-label other-label">
                    <span class="common-index step-index">3</span>
                    <p class="info-text">注册成功</p>
                </div>
            </div>
        </div>
    </div>
    <div id="phonePanel" class="row mgt20">
        <!-- 电话的form表单 --->
        <div class="col-sm-6 col-sm-push-3 col-xs-8 col-xs-push-2">
            <form onsubmit="javascript: return false;">
                <div class="form-group">
                    <label for="phone">电话</label>
                    <input type="text" autocomplete="off" id="phone" class="form-control">
                </div>
                <div class="form-group">
                    <label for="validateCode">验证码</label>
                    <div class="input-group">
                        <input type="text" autocomplete="off" id="validateCode" class="form-control">
                        <!--  cursor: pointer; 将鼠标的形状改为手状。-->
                        <span class="input-group-addon" id="secondCountDown" style="cursor: pointer;">获取验证码</span>
                    </div>
                </div>
                <div>
                    <button onclick="gotoNext()" class="btn btn-block btn-danger">下一步</button>
                </div>
            </form>
        </div>
    </div>
    <div id="otherInfoPanel" class="row mgt20" style="display: none;">
        <!-- 其他信息的form表单 -->
        <div class="col-sm-6 col-sm-push-3 col-xs-8 col-xs-push-2">
            <form id="remainInfoForm" onsubmit="javascript: return false;">
                <div class="form-group" style="position: relative;">
                    <label for="username">用户名(必须以字母开头,中间不能包含特殊符号(!、@、#、$、%、&、*(、)): </label>
                    <input type="text" autocomplete="off" class="form-control" name="username" id="username">
                    <i id="success-icon" class="fa fa-check username-success"></i>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" class="form-control">
                </div>
                <div class="form-group">
                    <label for="repassword">重复密码</label>
                    <input type="password" id="repassword" class="form-control">
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="text" autocomplete="off" name="email" id="email" class="form-control">
                </div>
                <div class="form-group">
                    <label for="sex">性别</label>
                    <div>
                        <label>
                            <input type="radio" checked name="gender" value="F" id="sex"> 女
                        </label>
                        <label>
                            <input type="radio" name="gender" value="M" id="sex"> 男
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <button onclick="submitToRegister()" class="btn btn-block btn-danger">立即注册</button>
                </div>
            </form>
        </div>
    </div>
    <div id="successPanel" class="row mgt20" style="display: none;">
        <h3 class="success-text">恭喜你, 注册成功!</h3>
        <div class="col-sm-6 col-sm-push-3 col-xs-8 col-xs-push-2">
            <button onclick="submitToFinsh()" class="btn btn-block btn-info">完成</button>
        </div>
    </div>
</div>
</body>
<script>

    var code;

    //给span绑定事件
    $('#secondCountDown').on('click', getValidateCode);

    function getValidateCode() {
        var phone = $('#phone').val();
        var reg = /^1(44|47|91|99|73|76|77|[358]\d)\d{8}$/;
        if (!reg.test(phone)) {
            showErrorBox('请填写正确手机号码.')
            return;
        }

        // 解绑事件. 无论用户的手机号是否存在或者后端短信是否发送成功, 都必须要解绑
        $('#secondCountDown').unbind('click');
        $.ajax({
            url: 'http://localhost:8080/getMessage',
            type: 'get',
            data: {phone: phone},
            dataType: 'json',
            success: function (_data) {
                if (_data.code <= 0) {  //错误
                    showErrorBox(_data.msg);
                    $('#secondCountDown').on('click', getValidateCode);
                } else {
                    code = _data.code;
                    $('#secondCountDown').css('background-color', '#ffffff');
                    countSeconde(60); //开始进入倒计时
                }
            }
        })
    }

    // 倒计时, 方法参数num是倒计时的时间，单位是s
    function countSeconde(num) {
        if(num > 0) { // 一直倒计时
            num--;
            $('#secondCountDown').html('剩余(' + num + "s)");
            // 每过一秒重新执行该方法
            setTimeout(function(){
                countSeconde(num);
            }, 1000);
        }else {  //表示已经倒计时完毕
            $('#secondCountDown').html('重新获取');
            $('#secondCountDown').on('click', getValidateCode); //重新绑定
            $('#secondCountDown').css('background-color', '#cccccc');
        }
    }

    // 在电话面板，点击下一步的按钮
    function gotoNext() {
        //用户手机号  **  验证码
        var phone = $('#phone').val(); //获取手机号
        var validateCode = $('#validateCode').val(); //获取验证码

        var reg = /^1(44|47|91|99|73|76|77|[358]\d)\d{8}$/;
        if (!reg.test(phone)) {
            showErrorBox('请填写正确手机号码.')
            return;
        }
        reg = /^\d{4}$/;  //验证码的长度只能为四位整数
        if (!reg.test(validateCode)) {
            showErrorBox('验证码错误.')
            return;
        }
        if (code != validateCode) {
            //验证正确，进入下一步
            showErrorBox("验证码错误")
            return;
        };
        // else {
        //      RegisterPanel.changePhoneLabel();
        // }

        // 验证手机号是否存在，存在不能激活
            $.ajax({
                url: 'http://localhost:8080/checkPhone',
                type: 'get',
                data: {phone: phone},
                dataType: 'json',
                success: function (_data) {
                  if (_data.code == -1){
                      showErrorBox(_data.msg)
                  }else {
                      RegisterPanel.changePhoneLabel()
                  }
                }
            })
    }

    $('#username').focus(function () {
        $('#success-icon').hide();
    });
    $('#password').focus(function () {
        $('#success-icon').hide();
    });
    $('#repassword').focus(function () {
        $('#success-icon').hide();
    });
    $('#email').focus(function () {
        $('#success-icon').hide();
    });

    /**
     * 当用户名输入框失去焦点的时候，要验证两点：
     *      1.用户名不能为空.
     *      2.用户名不能重复.
     */
    $('#username').blur(function () {
        validateUsername();
    })
    // 重复密码失去焦点的时候进行的判断
    $('#repassword').blur(function () {
        validateRePassword();
    });

    // 当邮箱失去焦点的时候
    $('#email').blur(function () {
        validateEmail();
    })


    //验证用户名
    function validateUsername() {
        var username = $('#username').val();//获取用户名的值
        if (!username || "" == username.trim()) {
            showErrorBox('用户不能为空')
            return false;
        }
        var wordReg = /^[a-zA-Z]+/;  //必须以字母开头
        var specialReg = /[`~!@#$^&*()=|{}':;',\[\].<>?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]/;  //特殊字符验证

        // 字母不是以字母开头，并且中间包含特殊字符
        if (!wordReg.test(username) || specialReg.test(username)) {
            showErrorBox('用户格式不对.')
            return false;
        }

        // 验证用户名是否存在
        $(function () {
            $.ajax({
                url: 'http://localhost:8080/checkUsername',
                type: 'get',
                data: {username: username},
                dataType: 'json',
                success: function (_data) {
                    if (_data.code == -1) {
                        showErrorBox(_data.msg)
                        return false;
                    }else {
                        $('#success-icon').show();
                    }
                }
            })
        })
        return true;
    }

    // 校验密码
    function validatePassword() {
        var pwd = $('#password').val(); //取密码的值
        if (!pwd) {
            showErrorBox('密码不能为空.')
            return false;
        }
        return true;
    }

    // 验证重复密码
    function validateRePassword() {
        var repwd = $('#repassword').val(); //取重复密码的值
        if (!repwd) {
            showErrorBox('重复密码不能为空.')
            return false;
        }

        var pwd = $('#password').val();
        if (pwd != repwd) {
            showErrorBox('两次密码不能为空.')
            return false;
        }
        return true;
    }

    // 验证邮箱
    function validateEmail() {
        var email = $('#email').val();
        if (!email || '' == email.trim()) {
            showErrorBox('邮箱不能为空.')
            return false;
        }
        var reg = /^[a-zA-Z1-9_][-\w]{2,8}@[0-9a-zA-Z]{2,6}\.[a-zA-Z]{2,6}$/;
        if (!reg.test(email)) {
            showErrorBox('邮箱格式错误.')
            return false;
        }
        return true;
    }

    // 点击 "立即注册" 按钮
    function submitToRegister() {
        // 表示所有的校验如果全部成功,才执行后续代码
        // 该if是短路操作.
        if (validateUsername() && validatePassword() && validateRePassword() && validateEmail()) {
            // var uName = $('#username').val();
            // var password = $('#password').val();
            // var email = $('#email').val();
            // var sex = $('#sex').val();
            // var phone = $('#phone').val();
            // var str = JSON.stringify( {uName:uName , password : password ,email:email ,sex:sex ,phone : phone}); //TODO

            var params = {
                uName: $("#username").val(),
                uPassword: $("#password").val(),
                uEmail: $("#email").val(),
                uSex: $('#sex').val(),
                uPhone: $("#phone").val()
            };
            $.ajax({
                url: 'http://localhost:8080/adduser',
                type: 'post',
                data: JSON.stringify(params),
                // dataType: 'json',
                contentType: 'application/json',
                success: function (_data) {
                    if (_data.code = 1) {
                        // $.cookie('frontedUsername', $('#username').val());
                        // 隐藏手机号form和其他信息的form编面板，显示注册成功面板
                        RegisterPanel.changeOtherInfoLabel();
                    }else {
                        showErrorBox("注册失败！");
                    }
                }
            })
        }
    }

    function submitToFinsh() {
        window.location.href ="login.html";

    }

    // 显示错误提示信息
    function showErrorBox(msgText) {
        Lobibox.notify('warning', {
            size: 'mini',
            delay: 2000,
            delayIndicator: false,
            title: false, //不给title
            msg: msgText,
            sound: false  // 不要音频
        })
    }
</script>
</html>